<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <!-- for循环复选框
        将复选框的参数下标传递 -->
    <div id="app">
        <div v-for="(ball,index) in hobby">
            <!-- 得到点击的对象，作为参数传下去 -->
            <input type="checkbox" @click="checkIt(index)" :id="index">
            <span>{{ball}}</span>
        </div>
        <button @click="commitData()">提交</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                hobby: ["篮球", "足球", "排球", "各种球"],
                hobbySet: new Set() //创建一个集合  用于存储数据和去重
            },
            methods: {
                checkIt(index) {
                    //通过下标 找到对应的input标签
                    let option = document.getElementById(index); //得到所在id的对象
                    if (option.checked) {
                        console.log("勾选");
                        this.hobbySet.add(index);
                    } else {
                        console.log("取消");
                        this.hobbySet.delete(index);
                    }
                    console.log(this.hobbySet);
                },
                commitData() {
                    //将set转换成数组
                    let hids = Array.from(this.hobbySet);
                    //排序  过程中 也会去重
                    hids = hids.sort();
                    console.log(hids);
                }
            }
        });
    </script>
</body>

</html>